<template>
  <a-table
    bordered
    class="my-table"
    :pagination="false"
    row-key="packageId"
    :loading="loading"
    :columns="columns"
    :data-source="priceTable"
  >
    <template #bodyCell="{ text, index, column }">
      <div v-if="column.key === 'timer'" class="cursor-default">
        <span class="font-bold">{{ text.value }}</span>
        <span class="gift" v-if="text.shop">送店铺</span>
      </div>
      <div v-else class="relative cursor-default">
        <span v-if="column.disable">暂不售卖</span>

        <div v-else-if="column.sold">
          <p style="font-weight: 600">已售</p>
          <!-- <a-button type="link" style="padding: 0" @click="getBwPro"> -->
          <p style="font-size: 12px">
            去
            <span v-if="type === ProductEnum.BWYXB" class="text" @click="getBwYxb(ProductEnum.BW)"> 百姓版 </span>
            <span v-else-if="type === ProductEnum.BW" class="text" @click="getBwYxb(ProductEnum.BWYXB)"> 百搜版 </span>
            ,
            <span class="text" @click="getBwPro">通品</span>
            看看
          </p>
          <!-- </a-button> -->
        </div>
        <span v-else-if="text">{{ text.assessmentPrice || '--' }}</span>
        <a-popover v-else>
          <template #content>
            按照“平台*时段*时长”勾选，
            <br />
            具体价格需要人工审核后确定。
          </template>
          <template #title>
            <span>提示</span>
          </template>
          <span class="block">—</span>
        </a-popover>
        <CheckCircleFilled v-if="isEqual(xy, [index, column.dataIndex])" class="ml-2 align-middle absolute checker" />
        <corner-mark
          upper-left
          top="-18px"
          left="-8px"
          width="40px"
          height="40px"
          class="corner-mask"
          v-show="isEqual(xy, [index, column.dataIndex]) && showCorner && column.assessmentPrice"
        >
          限时
        </corner-mark>
      </div>
      <span :class="{ 'font-bold': column.key === 'timer' }"></span>
    </template>
  </a-table>
</template>

<script lang="ts" setup name="BwPriceTable">
import { computed } from 'vue'
import { message, type TableProps } from 'ant-design-vue'
import { CheckCircleFilled } from '@ant-design/icons-vue'
import CornerMark from '@/components/corner-mark/index.vue'
import { DataIndex } from '@/core/enums/name'
import { PricePlatform } from '@/core/enums/platform'
import type { Coordinates } from '@/views/price-sheet/hooks/usePriceCoordinates'
import { isEqual } from 'lodash-es'
import userDetail from '@/services/user/userDetail'
import { useMainStore } from '@/store/useMainStore'
import type { BwPriceAskWords } from '@/services/price-sheet/getBwPriceAskWords'
import { ProductEnum } from '@/core/enums/platform'
import { useVModel } from '@vueuse/core'

const mainStore = useMainStore()

interface Props {
  loading?: boolean
  priceTable: any[]
  showCorner?: boolean
  mobileSold?: boolean
  pcSold?: boolean
  mobileDisable?: boolean
  pcDisable?: boolean
  xy: Coordinates
  bwPriceInfo?: BwPriceAskWords
  typeCode?: ProductEnum
}

interface Emits {
  (e: 'cell-click', d: Coordinates): void
  (e: 'cibao-reset'): void
  (e: 'bw-reset'): void
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  priceTable: () => [],
  pcSold: false,
  mobileSold: false,
  pcDisable: false,
  mobileDisable: false,
  showCorner: false,
  xy: () => []
})

const type = useVModel(props, 'typeCode')

const emit = defineEmits<Emits>()
const { Platform, PC, Mobile } = PricePlatform

const columns = computed<TableProps['columns']>(() => [
  {
    title: '',
    width: '160px',
    dataIndex: 'timer',
    key: 'timer',
    customRender: ({ text }) => {
      return text.value
    }
  },
  {
    title: '双端报价',
    key: Platform,
    align: 'center',
    children: [
      {
        title: '7天*24小时(元)',
        key: Platform,
        dataIndex: DataIndex.Platform7x24,
        align: 'center',
        sold: props.pcSold || props.mobileSold,
        disable: props.pcDisable || props.mobileDisable,
        customCell: (row, rowIndex, column) => ({
          onClick: () => handleCellClick(row, column, rowIndex)
        })
      },
      {
        title: '5天*8小时(元)',
        key: Platform,
        dataIndex: DataIndex.Platform5x8,
        sold: props.pcSold || props.mobileSold,
        disable: props.pcDisable || props.mobileDisable,
        align: 'center',
        customCell: (row, rowIndex, column) => ({
          onClick: () => handleCellClick(row, column, rowIndex)
        })
      }
    ]
  },
  {
    title: '手机端报价',
    key: Mobile,
    align: 'center',
    children: [
      {
        title: '7天*24小时(元)',
        key: Mobile,
        dataIndex: DataIndex.Mobile7x24,
        sold: props.mobileSold,
        disable: props.mobileDisable,
        align: 'center',
        customCell: (row, rowIndex, column) => ({
          onClick: () => handleCellClick(row, column, rowIndex)
        })
      },
      {
        title: '5天*8小时(元)',
        key: Mobile,
        sold: props.mobileSold,
        dataIndex: DataIndex.Mobile5x8,
        disable: props.mobileDisable,
        align: 'center',
        customCell: (row, rowIndex, column) => ({
          onClick: () => handleCellClick(row, column, rowIndex)
        })
      }
    ]
  },
  {
    title: '电脑端报价',
    key: PC,
    align: 'center',
    children: [
      {
        title: '7天*24小时(元)',
        key: PC,
        dataIndex: DataIndex.Pc7x24,
        sold: props.pcSold,
        disable: props.pcDisable,
        align: 'center',
        customCell: (row, rowIndex, column) => ({
          onClick: () => handleCellClick(row, column, rowIndex)
        })
      },
      {
        title: '5天*8小时(元)',
        key: PC,
        dataIndex: DataIndex.Pc5x8,
        sold: props.pcSold,
        disable: props.pcDisable,
        align: 'center',
        customCell: (row, rowIndex, column) => ({
          onClick: () => handleCellClick(row, column, rowIndex)
        })
      }
    ]
  }
])

function handleCellClick(row: any, column: any, rowIndex?: number) {
  if (!column.disable && !column.sold) {
    if (isEqual(props.xy, [rowIndex, column.dataIndex])) {
      emit('cell-click', [])
    } else {
      emit('cell-click', [rowIndex || 0, column.dataIndex])
    }
  }
}

// 标王pro跳转
const [, userDetailFn] = userDetail()
const getBwPro = async () => {
  const [err, res] = await userDetailFn({
    id: mainStore.userInfo?.id
  })
  if (!err) {
    if (!res.data.data) {
      window.open('http://bwpro.e-baixing.com/#/price-package')
    } else {
      const user = res.data.data
      window.open('http://bwpro.e-baixing.com/#/price-package?userId=' + user.id + '&token=' + user.password)
    }
  } else {
    message.warning(err.message)
  }
}
// 标王优选版
function getBwYxb(val: ProductEnum) {
  type.value = val
  if (val === ProductEnum.BW || val === ProductEnum.BWYXB) {
    emit('bw-reset')
  } else {
    emit('cibao-reset')
  }
}
</script>

<style lang="scss" scoped>
.text {
  text-decoration: underline;
  color: #ff4d4f;
  cursor: pointer;
}

.my-table {
  ::v-deep(.ant-table-thead > tr > th) {
    background: #fcf8e6;
    color: #545151;
    font-weight: bold;
  }

  ::v-deep(.ant-table-tbody > tr > td) {
    padding: 18px 8px;
  }

  ::v-deep(.ant-table-cell) {
    color: #606266;
    font-weight: normal;
  }

  .gift {
    padding: 1.5px 4px;
    background: #ff6366;
    border-radius: 7px;
    color: #fff;
    font-size: 12px;
    margin-left: 5px;
    position: absolute;
    right: 50px;
  }

  .checker {
    bottom: -8px;
    right: 4px;
    font-size: 18px;
    color: #ff4d4f;
  }
}

.corner-mask.upper-left {
  ::v-deep(.text) {
    top: 5px;
    left: -14px;
    font-size: 12px;
  }
}
</style>
